<template>
  <section>
    <el-form :inline="true" :model="listQuery">
      <el-form-item label="">
        <el-select size="mini" v-model="listQuery.payStatus" placeholder="付款状态" clearable>
          <el-option label="已付款" value="1"></el-option>
          <el-option label="待付款" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select size="mini" v-model="listQuery.sellerType" placeholder="小店类型" clearable>
          <el-option label="云上小店" value="1"></el-option>
          <el-option label="线下小店" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="流水号" v-model="listQuery.orderNo" />
      </el-form-item>
      <el-form-item label="">
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="用户关键字"
          v-model="listQuery.memberKeyword" />
      </el-form-item>
      <el-form-item label="">
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="小店关键字"
          v-model="listQuery.sellerKeyword" />
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleCreate">添加订单</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%">
      <el-table-column align="left" label="流水号" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="支付状态" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.payStatusText }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订购用户" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.memberName }}（{{ scope.row.memberMobile }}）</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订购天数" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.days }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="服务项目" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="订购金额" width="100">
        <template slot-scope="scope">
          <span>￥{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="实付金额" width="100">
        <template slot-scope="scope">
          <span>￥{{ scope.row.actualAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="小店类型" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.sellerTypeText }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="小店名称" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.sellerName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="小店地址" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.sellerAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="支付流水号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.paySn }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.canPay == 1" type="primary"
            @click="handleRecharge(scope.row)">付款</el-button>
          <el-button size="mini" v-if="scope.row.canCreate == 1" type="primary"
            @click="handleCreate(scope.row)">创建小店</el-button>
          <el-button size="mini" v-if="scope.row.canView == 1" type="primary"
            @click="handleView(scope.row)">入驻信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

    <el-dialog title="订单付款" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="payForm" ref="payForm" label-width="150px">
        <el-form-item label="付款方式" prop="payMethod">
          <el-select size="mini" v-model="payForm.payMethod" placeholder="付款方式" clearable>
            <el-option label="微信" value="1"></el-option>
            <el-option label="支付宝" value="2"></el-option>
            <el-option label="余额支付" value="3"></el-option>
            <el-option label="银联转账" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传凭证" prop="picture">
          <pic-sel style="float:left" v-model="payForm.picture" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="" maxlength="100"
            v-model="payForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button :loading="rechargeLoading" size="mini" type="primary" @click="okRecharge()">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  seller_order_list,
  seller_order_pay,
  seller_check,
  seller_check2,
  seller_refuse,
  seller_recharge
} from '../../api/seller';
export default {
  components: {
    'pic-sel': () => import('../../components/PicSel/index')
  },
  data() {
    return {
      isSelect: false,
      dialogFormVisible: false,
      rechargeLoading: false,
      list: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        memberKeyword: undefined,
        sellerKeyword: undefined,
        payStatus: undefined,
        sellerType: undefined,
        orderNo: undefined,
      },
      total: null,
      activeName: '0',
      payForm: {
        remark: undefined,
        picture: undefined,
        orderId: undefined,
        payMethod: undefined,
      }
    }
  },
  mounted() {
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      seller_order_list(this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    handleCreate() {
      this.$router.push("/seller/order_create")
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleClick(tab, event) {
      this.listQuery.status = this.activeName;
      this.handleFilter();
      // console.log(this.activeName)
    },
    handleUpdate(row) {
      this.$router.push("/company/shop_edit?id=" + row.id)
    },
    getStatusColor(row) {
      if (row.status === 1) {
        return "success"
      }

      return "danger"
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_del(row.id)
            .then(() => {
              this.$message.success("商户删除成功");
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            });
        }).catch(() => { });
    },
    handleCheck(row) {
      this.$confirm('确定审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_check(row.id)
            .then(() => {
              this.$message.success("商户审核成功");
              this.getList();
            });
        }).catch(() => { });
    },
    payOrder(row) {

    },
    handleCheck2(row) {
      this.$confirm('确定取消审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_check2(row.id)
            .then(() => {
              this.$message.success("商户取消审核成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handleRefuse(row) {
      this.$confirm('确定拒绝审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_refuse(row.id)
            .then(() => {
              this.$message.success("商户拒绝审核成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handleRecharge(row) {
      this.payForm.orderId = row.id;
      this.payForm.payMethod = undefined;
      this.payForm.remark = undefined;
      this.payForm.picture = undefined;

      this.dialogFormVisible = true;
    },
    okSelect(item) {
      this.$emit('okSelect', item);
    },
    handleView(item) {
      this.$router.push("/company/shop_edit?id=" + item.sellerId)
    },
    okRecharge() {
      if (!this.payForm.payMethod) {
        this.$message.error("请选择支付方式");
        return;
      }

      this.$confirm('确定付款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.rechargeLoading = true;
          seller_order_pay(this.payForm).then((re) => {
            this.rechargeLoading = false;
            this.$message.success("成功付款");
            this.dialogFormVisible = false;
            this.getList();
          }).catch((err) => {
            this.rechargeLoading = false;
          })


        }).catch(() => { });
    }
  }
}
</script>
<style lang="scss" scoped></style>
